<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>直接费</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="widtd=device-widtd, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_tnyc012u2rlwstt9.css" media="all"/>
    <link rel="stylesheet" href="../css/main.css" media="all"/>
    <link rel="stylesheet" href="../css/directlyFee.css" media="all"/>
</head>
<style>
    #addopen .layui-tab {
        margin: 0 !important;
    }
</style>
<body class="childrenBody all">
<div id="all">
    <div class="top" id="directlyFee">
        <div>
            <button type="button" class="layui-btn" @click="adduser(1)"><i class="layui-icon">&#xe608;</i> 添加</button>
            <button type="button" @click="exports" class="layui-btn layui-btn-normal"><i class="layui-icon">&#xe621;</i>导出
            </button>
        </div>
        <!--<div class="top_right">-->
            <!--<div class="layui-input-inline">-->
                <!--<input type="tel" name="phone" lay-verify="required|phone" placeholder="搜索项目序号、员工编号、费用类型、名称、使用人员"-->
                       <!--autocomplete="off" class="layui-input">-->
            <!--</div>-->
            <!--<div>-->
                <!--<button type="button" class="layui-btn layui-btn-normal">搜索</button>-->
            <!--</div>-->
        <!--</div>-->
    </div>
    <div class="tabs">
        <table class="layui-table tab1" id="directlyFees">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>材料编号</td>
                <td>材料名称</td>
                <td>规格型号<br/>(姓名)</td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr1" :key="index">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 0)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.cl_num}}</td>
                <td>{{item.associate.cl_name}}</td>
                <td>{{item.associate.cl_model}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr>
                <td colspan="4"></td>
                <td colspan="8">材料费合计</td>
                <td>{{j1}}</td>
                <td>{{s1}}</td>
                <td colspan="2" ></td>
            </tr>
        </table>
        <table class="layui-table tab2">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>人员编号</td>
                <td>工种</td>
                <td>规格型号<br/>(姓名)</td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr2" :key="index+1">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 1)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.ry_num}}</td>
                <td>{{item.associate.ry_type}}</td>
                <td>{{item.associate.ry_name}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="8">人工费合计</td>
                <td>{{j2}}</td>
                <td>{{s2}}</td>
                <td colspan="2" ></td>
            </tr>
        </table>
        <table class="layui-table tab2">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>机械编号</td>
                <td>机械名称</td>
                <td>规格型号<br/></td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr3" :key="index+3">
                <td>
                    <span class="operation" @click="adduser(2, item.id, 2)">编辑</span>
                    <span @click="del(item.id)" class="operation">删除</span>
                </td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.jx_num}}</td>
                <td>{{item.associate.jx_name}}</td>
                <td>{{item.associate.jx_model}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="8">机械费合计</td>
                <td>{{j3}}</td>
                <td>{{s3}}</td>
                <td colspan="2" ></td>
            </tr>
        </table>
    </div>
    <div style="display: none" id="hesan">
        <table class="layui-table tab1">
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>材料编号</td>
                <td>材料名称</td>
                <td>规格型号<br/>(姓名)</td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr1" >
                <td><span class="operation">编辑</span> <span class="operation">删除</span></td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.cl_num}}</td>
                <td>{{item.associate.cl_name}}</td>
                <td>{{item.associate.cl_model}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr>
                <td colspan="4"></td>
                <td colspan="8">材料费合计</td>
                <td>{{j1}}</td>
                <td>{{s1}}</td>
                <td colspan="2"></td>
            </tr>
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>人员编号</td>
                <td>工种</td>
                <td>规格型号<br/>(姓名)</td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr2" >
                <td><span class="operation">编辑</span> <span class="operation">删除</span></td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.ry_num}}</td>
                <td>{{item.associate.ry_type}}</td>
                <td>{{item.associate.ry_name}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="8">人工费合计</td>
                <td>{{j2}}</td>
                <td>{{s2}}</td>
                <td colspan="2"></td>
            </tr>
            <tr class="gray" style="font-weight: bold">
                <td>操作</td>
                <td>序号</td>
                <td>填写日期</td>
                <td>填表人</td>
                <td>机械编号</td>
                <td>机械名称</td>
                <td>规格型号<br/></td>
                <td>单位</td>
                <td>数量</td>
                <td>税率(%)</td>
                <td>含税价</td>
                <td>不含税价</td>
                <td>金额</td>
                <td>税额</td>
                <td>使用部位</td>
                <td>备注</td>
            </tr>
            <tr v-for="(item, index) in arr3" >
                <td><span class="operation">编辑</span> <span class="operation">删除</span></td>
                <td>{{item.id}}</td>
                <td>{{item.createtime}}</td>
                <td>{{item.user_name}}</td>
                <td>{{item.associate.jx_num}}</td>
                <td>{{item.associate.jx_name}}</td>
                <td>{{item.associate.jx_model}}</td>
                <td>{{item.unit}}</td>
                <td>{{item.num}}</td>
                <td>{{item.tax_fee}}</td>
                <td>{{item.tax_money}}</td>
                <td>{{item.notax_money}}</td>
                <td>{{item.total_money}}</td>
                <td>{{item.total_taxmoney}}</td>
                <td>{{item.use_part}}</td>
                <td>{{item.note}}</td>
            </tr>
            <tr class="gray">
                <td colspan="4"></td>
                <td colspan="8">机械费合计</td>
                <td>{{j3}}</td>
                <td>{{s3}}</td>
                <td colspan="2"></td>
            </tr>
        </table>
    </div>
</div>
<div id="demo8"></div>
<div class="x-body" id="addopen" style="display: none;">
    <div class="layui-tab" lay-filter="types">
        <ul class="layui-tab-title" id="tabli">
            <li class="layui-this">材料信息</li>
            <li>人工信息</li>
            <li>机械信息</li>
        </ul>
        <div class="layui-tab-content" id="tabcontext" style="height: 100px;">
            <div class="layui-tab-item layui-show">
                <form class="layui-form" id="tabs1" lay-filter="tabs1">
                    <div class="layui-form-item">
                        <label for="cl_name" class="layui-form-label">
                            <span class="x-red">*</span>材料名称
                        </label>
                        <div class="layui-input-inline">
                        <select id="cl_name" lay-filter="demo1" lay-search="" name="cl_name"  class="valid">

                        </select>
                        </div>
                        <label for="cl_num"  class="layui-form-label">
                            <span class="x-red">*</span>材料编号
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="cl_num" disabled name="cl_num"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="cl_model" class="layui-form-label">
                            <span class="x-red">*</span>材料型号
                        </label>
                        <div class="layui-input-inline">
                            <select id="cl_model" lay-filter="demo2" lay-search="" name="cl_model"  class="valid">

                            </select>
                        </div>
                        <label for="c_unit" class="layui-form-label">
                            <span class="x-red">*</span>单位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_unit" name="c_unit"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="c_number"  class="layui-form-label">
                            <span class="x-red">*</span>数量
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="c_number" name="c_number"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="c_rate" class="layui-form-label">
                            <span class="x-red">*</span>税率(%)
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="c_rate" name="c_rate"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="c_tpice" class="layui-form-label">
                            <span class="x-red">*</span>含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="c_tpice"  name="c_tpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="c_ntpice" class="layui-form-label">
                            <span class="x-red">*</span>不含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_ntpice" disabled  name="c_ntpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="c_amount" class="layui-form-label">
                            <span class="x-red">*</span>金额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_amount" disabled  name="c_amount"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="c_tax" class="layui-form-label">
                            <span class="x-red">*</span>税额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_tax" disabled  name="c_tax"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="c_pof" class="layui-form-label">
                            <span class="x-red">*</span>使用部位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_pof"  name="c_pof"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="c_note" class="layui-form-label">
                            备注
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="c_note"  name="c_note"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="c_createtime" class="layui-form-label">
                            <span class="x-red">*</span>日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" name="c_createtime"  lay-verify="date" placeholder="" autocomplete="off"  placeholder="选择日期" class="layui-input" id="c_createtime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                        </label>
                        <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" id="tabs2">
                    <div class="layui-form-item">
                        <label for="rg_name" class="layui-form-label">
                            <span class="x-red">*</span>姓名
                        </label>
                        <div class="layui-input-inline">
                            <select id="rg_name" lay-filter="demo1" lay-search="" name="rg_name"  class="valid">

                            </select>
                        </div>
                        <label for="rg_num"  class="layui-form-label">
                            <span class="x-red">*</span>人员编号
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="rg_num" disabled name="rg_num"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="rg_model" class="layui-form-label">
                            <span class="x-red">*</span>工种
                        </label>
                        <div class="layui-input-inline">
                            <select id="rg_model" lay-filter="demo2" lay-search="" name="rg_model"  class="valid">

                            </select>
                        </div>
                        <label for="r_unit" class="layui-form-label">
                            <span class="x-red">*</span>单位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_unit" name="r_unit"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="r_number"  class="layui-form-label">
                            <span class="x-red">*</span>数量
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="r_number" name="r_number"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="r_rate" class="layui-form-label">
                            <span class="x-red">*</span>税率(%)
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="r_rate" name="r_rate"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="r_tpice" class="layui-form-label">
                            <span class="x-red">*</span>含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="r_tpice"  name="r_tpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="r_ntpice" class="layui-form-label">
                            <span class="x-red">*</span>不含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_ntpice" disabled  name="r_ntpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="r_amount" class="layui-form-label">
                            <span class="x-red">*</span>金额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_amount" disabled  name="r_amount"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="r_tax" class="layui-form-label">
                            <span class="x-red">*</span>税额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_tax" disabled  name="r_tax"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="r_pof" class="layui-form-label">
                            <span class="x-red">*</span>使用部位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_pof"  name="r_pof"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="r_note" class="layui-form-label">
                            备注
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="r_note"  name="r_note"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="r_createtime" class="layui-form-label">
                            <span class="x-red">*</span>日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" name="r_createtime"  lay-verify="date" placeholder="" autocomplete="off"  placeholder="选择日期" class="layui-input" id="r_createtime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                        </label>
                        <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                </form>
            </div>
            <div class="layui-tab-item">
                <form class="layui-form" id="tabs3">
                    <div class="layui-form-item">
                        <label for="jx_name" class="layui-form-label">
                            <span class="x-red">*</span>机械名称
                        </label>
                        <div class="layui-input-inline">
                            <select id="jx_name" lay-filter="demo1" lay-search="" name="jx_name"  class="valid">

                            </select>
                        </div>
                        <label for="jx_num"  class="layui-form-label">
                            <span class="x-red">*</span>机械编号
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="jx_num" disabled name="jx_num"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="jx_model" class="layui-form-label">
                            <span class="x-red">*</span>机械型号
                        </label>
                        <div class="layui-input-inline">
                            <select id="jx_model" lay-filter="demo2" lay-search="" name="jx_model"  class="valid">
                            </select>
                        </div>
                        <label for="j_unit" class="layui-form-label">
                            <span class="x-red">*</span>单位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_unit" name="j_unit"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="j_number"  class="layui-form-label">
                            <span class="x-red">*</span>数量
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="j_number" name="j_number"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="j_rate" class="layui-form-label">
                            <span class="x-red">*</span>税率(%)
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="j_rate" name="j_rate"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="j_tpice" class="layui-form-label">
                            <span class="x-red">*</span>含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" oninput="upreal()" onkeyup="value=value.replace(/[^\d.]/g,'')" id="j_tpice"  name="j_tpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="j_ntpice" class="layui-form-label">
                            <span class="x-red">*</span>不含税价
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_ntpice" disabled  name="j_ntpice"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="j_amount" class="layui-form-label">
                            <span class="x-red">*</span>金额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_amount" disabled  name="j_amount"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="j_tax" class="layui-form-label">
                            <span class="x-red">*</span>税额
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_tax" disabled  name="j_tax"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="j_pof" class="layui-form-label">
                            <span class="x-red">*</span>使用部位
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_pof"  name="j_pof"
                                   autocomplete="off" class="layui-input">
                        </div>
                        <label for="j_note" class="layui-form-label">
                            备注
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" id="j_note"  name="j_note"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label for="j_createtime" class="layui-form-label">
                            <span class="x-red">*</span>日期
                        </label>
                        <div class="layui-input-inline">
                            <input type="text" name="j_createtime"  lay-verify="date" placeholder="" autocomplete="off"  placeholder="选择日期" class="layui-input" id="j_createtime">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">
                        </label>
                        <button class="layui-btn" type="button" lay-filter="add" lay-submit="">
                            保存
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript" src="../layui/layui.all.js"></script>
<script type="text/javascript" src="../js/main.js"></script>
<script type="text/javascript" src="../js/excel.js"></script>
<script type="text/javascript" src="../js/common.js"></script>
<script src="../layui/formSelects-v4.js"></script>
</body>
</html>
<script>
    layui.use(['laypage', 'layer', 'form', 'element'], function () {
        var laypage = layui.laypage
            , layer = layui.layer
            , form = layui.form
            , element = layui.element,
            laydate = layui.laydate,
            $ = layui.jquery;

        laydate.render({
            elem: '#c_createtime', //指定元素
            value: new Date()
        })
        laydate.render({
            elem: '#r_createtime', //指定元素
            value: new Date()
        })
        laydate.render({
            elem: '#j_createtime', //指定元素
            value: new Date()
        })
        element.on('tab(types)', function (data) {
            vm.tabs = data.index;
            vm.number = '';
            vm.rate = '';
            vm.tpice= '';
        });
        form.on('select(demo1)', function (data) {
            var da = data.value;
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            })
            if(vm.tabs == 0){
                var opvalue =  '';
                opvalue += '<option value="">请选择</option>';
                var obj = {
                    project_id: vm.project_id,
                    type: 1,
                    name: da
                }
                $("#cl_num").val('');
                $("#cl_model").empty();
                $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleitwo', obj).done(function (res) {
                        if (res.code == 1) {
                            var arr = res.data;
                            for (item in arr) {
                                opvalue += '<option   value="' + arr[item].id + ',' + arr[item].number + '">' + arr[item].model + '</option>'
                            }
                            $("#cl_model").append(opvalue);
                            layui.form.render('select');// 再次渲染select
                            if(vm.cuobj.id){
                                var selects = 'dd[lay-value="'+vm.cuobj.id + ','+ vm.cuobj.cl_num+ '"]';// 设置value
                                $('#cl_model').siblings("div.layui-form-select").find('dl').find(selects).click();
                                vm.cuobj = '';
                            }

                        }
                     layui.layer.close(load)
                    })
                )

            }else if(vm.tabs == 1){
                var opvalue = '';
                opvalue += '<option value="">请选择</option>';
                var obj = {
                    project_id: vm.project_id,
                    type: 2,
                    name: da
                }
                $("#rg_num").val('');
                $("#rg_model").empty();
                $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleitwo', obj).done(function (res) {
                        if (res.code == 1) {
                            var arr = res.data;
                            for (item in arr) {
                                opvalue += '<option   value="' + arr[item].id + ',' + arr[item].number + '">' + arr[item].model + '</option>'
                            }
                            $("#rg_model").append(opvalue);
                            layui.form.render('select');// 再次渲染select
                            if(vm.cuobj.id){
                                var selects = 'dd[lay-value="'+vm.cuobj.id + ','+ vm.cuobj.ry_num+ '"]';// 设置value
                                $('#rg_model').siblings("div.layui-form-select").find('dl').find(selects).click();
                                vm.cuobj = '';
                            }
                        }
                        layui.layer.close(load)
                    })
                )
//                vm.rid = darr[2];
            }else if(vm.tabs == 2){
                var opvalue = '';
                opvalue += '<option value="">请选择</option>';
                var obj = {
                    project_id: vm.project_id,
                    type: 3,
                    name: da
                }
                $("#jx_num").val('');
                $("#jx_model").empty();
                $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleitwo', obj).done(function (res) {
                        if (res.code == 1) {
                            var arr = res.data;
                            for (item in arr) {
                                opvalue += '<option   value="' + arr[item].id + ',' + arr[item].number + '">' + arr[item].model + '</option>'
                            }
                            $("#jx_model").append(opvalue);
                            layui.form.render('select');// 再次渲染select
                            if(vm.cuobj.id){
                                var selects = 'dd[lay-value="'+vm.cuobj.id + ','+ vm.cuobj.jx_num+ '"]';// 设置value
                                $('#jx_model').siblings("div.layui-form-select").find('dl').find(selects).click();
                                vm.cuobj = '';
                            }
                        }
                        layui.layer.close(load)
                    })
                )
            }

        });
        form.on('select(demo2)', function (data) {
            var darr = data.value.split(',');
            if(vm.tabs == 0){
                $("#cl_num").val(darr[1]);
                vm.cid = darr[0];
            }else if(vm.tabs == 1){
                $("#rg_num").val(darr[1]);
                vm.rid = darr[0];
            }else if(vm.tabs == 2){
                $("#jx_num").val(darr[1]);
                vm.jid = darr[0];
            }

        });
        form.on('submit(add)', function (data) {
            var load = layer.load(2, {
                shade: [0.6, '#fff'] //0.1透明度的白色背景
            })
            var obj = {
                project_id: vm.project_id,
                type: vm.tabs + 1
            }
            if(vm.tabs == 0){
                obj.associate_id = vm.cid;
                obj.num = data.field.c_number;
                obj.unit = data.field.c_unit;
                obj.tax_fee = data.field.c_rate / 100;
                obj.tax_money = data.field.c_tpice;
                obj.use_part = data.field.c_pof;
                obj.note = data.field.c_note;
                obj.createtime = data.field.c_createtime;
            }else if(vm.tabs == 1){
                obj.associate_id = vm.rid;
                obj.num = data.field.r_number;
                obj.unit = data.field.r_unit;
                obj.tax_fee = data.field.r_rate / 100;
                obj.tax_money = data.field.r_tpice;
                obj.use_part = data.field.r_pof;
                obj.note = data.field.r_note;
                obj.createtime = data.field.r_createtime;
            }else{
                obj.associate_id = vm.jid;
                obj.num = data.field.j_number;
                obj.unit = data.field.j_unit;
                obj.tax_fee = data.field.j_rate /100;
                obj.tax_money = data.field.j_tpice;
                obj.use_part = data.field.j_pof;
                obj.note = data.field.j_note;
                obj.createtime = data.field.j_createtime;
            }
            var url = '';
            if(vm.stus == 1){
                url = 'api/Zhimoney/zhimoneyadd';
            }else{
                url = 'api/Zhimoney/zhimoneyeditdo';
                obj.id = vm.tid;
            }
            $.when(PUATTRBUTE.REQUESTFUN(url, obj).done(function (res) {
                    layui.layer.close(load)
                    if(res.code == 1){
                        vm.initData();
                        layui.layer.msg(res.msg, {time:1000, icon: 1});
                        vm.number = '';
                        vm.rate = '';
                        vm.tpice = '';
                        layer.closeAll();
                        layui.form.render();
                    }else{
                        layui.layer.msg(res.msg, {time:1000, icon: 2})
                    }
                })
            )
        })
        // 计算价格
        window.upreal = function(){
            if(vm.tabs == 0){
                if($("#c_number").val() != ''){
                    vm.number = $("#c_number").val();
                }
                if($("#c_rate").val() != ''){
                    vm.rate = $("#c_rate").val();
                }
                if($("#c_tpice").val() != ''){
                    vm.tpice = $("#c_tpice").val();
                }
                if(vm.number != '' && vm.rate != '' && vm.tpice != ''){
                    var p1 = vm.tpice / (1 + vm.rate / 100) +"";
                    $("#c_ntpice").val(PUATTRBUTE.CHANGETWO(p1));
                    var p2 = ((vm.tpice / (1 + vm.rate / 100)) * vm.number) +"";
                    $("#c_amount").val(PUATTRBUTE.CHANGETWO(p2));
                    var p3 = ((vm.tpice / (1 + vm.rate / 100)) * (vm.rate / 100) * vm.number)+"";
                    $("#c_tax").val(PUATTRBUTE.CHANGETWO(p3));
                }
            }else if(vm.tabs == 1){
                if($("#r_number").val() != ''){
                    vm.number = $("#r_number").val();
                }
                if($("#r_rate").val() != ''){
                    vm.rate = $("#r_rate").val();
                }
                if($("#r_tpice").val() != ''){
                    vm.tpice = $("#r_tpice").val();
                }
                if(vm.number != '' && vm.rate != '' && vm.tpice != ''){
                    var p1 = vm.tpice / (1 + vm.rate / 100) +"";
                    $("#r_ntpice").val(PUATTRBUTE.CHANGETWO(p1));
                    var p2 = ((vm.tpice / (1 + vm.rate / 100)) * vm.number) +"";
                    $("#r_amount").val(PUATTRBUTE.CHANGETWO(p2));
                    var p3 = ((vm.tpice / (1 + vm.rate / 100)) * (vm.rate / 100) * vm.number)+"";
                    $("#r_tax").val(PUATTRBUTE.CHANGETWO(p3));
                }
            }else if(vm.tabs == 2){
                if($("#j_number").val() != ''){
                    vm.number = $("#j_number").val();
                }
                if($("#j_rate").val() != ''){
                    vm.rate = $("#j_rate").val();
                }
                if($("#j_tpice").val() != ''){
                    vm.tpice = $("#j_tpice").val();
                }
                if(vm.number != '' && vm.rate != '' && vm.tpice != ''){
                    var p1 = vm.tpice / (1 + vm.rate / 100) +"";
                    $("#j_ntpice").val(PUATTRBUTE.CHANGETWO(p1));
                    var p2 = ((vm.tpice / (1 + vm.rate / 100)) * vm.number) +"";
                    $("#j_amount").val(PUATTRBUTE.CHANGETWO(p2));
                    var p3 = ((vm.tpice / (1 + vm.rate / 100)) * (vm.rate / 100) * vm.number)+"";
                    $("#j_tax").val(PUATTRBUTE.CHANGETWO(p3));
                }
            }
        }
        $(function () {
            var materialhtml = ''; //材料
            var artificial = ''; //人工
            var mechanical = ''; //机械
            materialhtml += '<option value="">请选择</option>';
            artificial += '<option value="">请选择</option>';
            mechanical += '<option value="">请选择</option>';
            var obj = {
                project_id: vm.project_id,
                type: 1
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleione', obj).done(function (res) {
                    if (res.code == 1) {
                        var arr = res.data;
                        for (item in arr) {
                            materialhtml += '<option   value="' + arr[item].name +'">' + arr[item].name + '</option>'
                        }
                        $("#cl_name").append(materialhtml);
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2})
                    }
                })
            )
            var obj2 = {
                project_id: vm.project_id,
                type: 2
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleione', obj2).done(function (res) {
                    if (res.code == 1) {
                        sessionStorage.setItem('artificial', JSON.stringify(res.data.list));
                        var arr = res.data;
                        for (item in arr) {
                            artificial += '<option   value="' + arr[item].name +'">' + arr[item].name + '</option>'
                        }
                        $("#rg_name").append(artificial);
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2})
                    }
                })
            )
            var obj3 = {
                project_id: vm.project_id,
                type: 3
            }
            $.when(PUATTRBUTE.REQUESTFUN('api/Classify/fenleione', obj3).done(function (res) {
                    if (res.code == 1) {
                        sessionStorage.setItem('mechanical', JSON.stringify(res.data.list));
                        var arr = res.data;
                        for (item in arr) {
                            mechanical += '<option   value="' + arr[item].name +'">' + arr[item].name + '</option>'
                        }
                        $("#jx_name").append(mechanical);
                    } else {
                        layer.msg(res.msg, {time: 1000, icon: 2})
                    }
                })
            )
            layui.form.render();
//            formSelects.render();
        })
    });
    var vm = new Vue({
        el: '#all',
        data: {
            arr1: [],
            arr2: [],
            arr3: [],
            tabs: 0, //tab index
            page: 1,
            project_id: sessionStorage.getItem('projectopt'),
            j1: '0', //材料 金额
            s1: '0',  //材料 税额
            j2: '0', //人工 金额
            s2: '0',  //人工 税额
            j3: '0', //机械 金额
            s3: '0',  //机械 税额
            number: '', //数量
            rate: '', //税率
            tpice: '', //含税价
            cid: '', //
            rid: '',
            jid: '',
            stus: '', //新增修改标识
            tid: '', //当前编辑id
            permissions:'',//权限标识
            cuobj: '', //编辑外键对象
        },
        created: function () {
            this.initData();
        },
        methods: {
            //数据初始化
            initData: function () {
                var obj = {
                    page: this.page,
                    limit: 12,
                    project_id: this.project_id
                }
                var load = layer.load(2, {
                    shade: [0.6, '#fff'] //0.1透明度的白色背景
                })
                $.when(PUATTRBUTE.REQUESTFUN('api/Zhimoney/zhimoneyindex', obj).done(function (res) {
                        layer.close(load)
                        if (res.code == 1) {
                            var total_money = 0;
                            var total_taxmoney = 0;
                            for(item in res.data.cailiao){
                                total_money += parseFloat(res.data.cailiao[item].total_money);
                                total_taxmoney += parseFloat(res.data.cailiao[item].total_taxmoney);
                                res.data.cailiao[item].tax_fee = res.data.cailiao[item].tax_fee * 100;
                            }
                            vm.arr1 = res.data.cailiao;
                            vm.j1 = total_money;
                            vm.s1 = total_taxmoney;
                            var total_money = 0;
                            var total_taxmoney = 0;
                            for(item in res.data.rengong){
                                total_money += parseFloat(res.data.rengong[item].total_money);
                                total_taxmoney += parseFloat(res.data.rengong[item].total_taxmoney) ;
                                res.data.rengong[item].tax_fee = res.data.rengong[item].tax_fee * 100;
                            }
                            vm.arr2 = res.data.rengong;
                            vm.j2 = total_money;
                            vm.s2 = total_taxmoney;
                            var total_money = 0;
                            var total_taxmoney = 0;
                            for(item in res.data.jixie){
                                total_money += parseFloat(res.data.jixie[item].total_money);
                                total_taxmoney += parseFloat(res.data.jixie[item].total_taxmoney);
                                res.data.jixie[item].tax_fee = res.data.jixie[item].tax_fee * 100;
                            }
                            vm.arr3 = res.data.jixie;
                            vm.j3 = total_money;
                            vm.s3 = total_taxmoney;

                        } else {
                            if(res.msg == "暂无权限"){
                                vm.permissions= 1 ;
                            }
                            layer.msg(res.msg, {time: 1000, icon: 2})
                        }
                    })
                )
            },
            //打开面板
            adduser: function (idx, tid, y) {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var title = ''
                    this.stus = idx;
                    this.tid = tid;
                    $("#tabli li:eq(0)").show();
                    $("#tabli li:eq(1)").show();
                    $("#tabli li:eq(2)").show();
                    $("#tabli li:eq(1)").removeClass('layui-this');
                    $("#tabli li:eq(2)").removeClass('layui-this');
                    var select = 'dd[lay-value=""]';// 设置value
                    $('#cl_name').siblings("div.layui-form-select").find('dl').find(select).click();
                    $('#cl_model').siblings("div.layui-form-select").find('dl').find(select).click();
                    $('#rg_name').siblings("div.layui-form-select").find('dl').find(select).click();
                    $("#rg_num").val('');
                    $('#rg_model').siblings("div.layui-form-select").find('dl').find(select).click();
                    $('#jx_name').siblings("div.layui-form-select").find('dl').find(select).click();
                    $("#jx_num").val('');
                    $('#jx_model').siblings("div.layui-form-select").find('dl').find(select).click();
                    layui.form.render('select');// 再次渲染select
                    if(idx == 1){
                        title = '新增面板';
                        vm.tabs = 0;
                        $("#tabli li:eq(0)").addClass('layui-this');
                        $("#tabcontext .layui-tab-item:eq(0)").addClass('layui-show');
                        $("#tabcontext .layui-tab-item:eq(1)").removeClass('layui-show');
                        $("#tabcontext .layui-tab-item:eq(2)").removeClass('layui-show');
                        layui.form.render('select');// 再次渲染select
                        document.getElementById("tabs1").reset();
                        document.getElementById("tabs2").reset();
                        document.getElementById("tabs3").reset();
                        $("#c_createtime").val(PUATTRBUTE.NEWDATE());
                        $("#r_createtime").val(PUATTRBUTE.NEWDATE());
                        $("#j_createtime").val(PUATTRBUTE.NEWDATE());
                        layui.form.render();
                    }else{
                        //编辑初始化数据
                        var obj = {
                            id: tid,
                            project_id: vm.project_id
                        }
                        title = '编辑信息';
                        if(y ==0){
                            $("#tabli li:eq('"+y+1+"')").hide();
                            $("#tabli li:eq('"+y+2+"')").hide();
                            $("#tabcontext .layui-tab-item:eq(0)").addClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(1)").removeClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(2)").removeClass('layui-show');
                            vm.tabs = 0;
                        }else if(y ==1){
                            $("#tabli li:eq(0)").hide();
                            $("#tabli li:eq(2)").hide();
                            $("#tabli li:eq(1)").addClass('layui-this')
                            $("#tabcontext .layui-tab-item:eq(1)").addClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(0)").removeClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(2)").removeClass('layui-show');
                            vm.tabs = 1;
                        }else if(y == 2){
                            $("#tabli li:eq(2)").addClass('layui-this')
                            $("#tabli li:eq(0)").hide();
                            $("#tabli li:eq(1)").hide();
                            $("#tabcontext .layui-tab-item:eq(2)").addClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(1)").removeClass('layui-show');
                            $("#tabcontext .layui-tab-item:eq(0)").removeClass('layui-show');
                            vm.tabs = 2;
                        }
                        $.when(PUATTRBUTE.REQUESTFUN('api/Zhimoney/zhimoneyedit', obj).done(function(res){
                                if(res.code == 1){
                                    if(vm.tabs == 0){
                                        $("#c_number").val(res.data.num);
                                        $("#c_unit").val(res.data.unit);
                                        $("#c_rate").val(res.data.tax_fee * 100);
                                        $("#c_tpice").val(res.data.tax_money);
                                        $("#c_pof").val(res.data.use_part);
                                        $("#c_note").val(res.data.note);
                                        $("#c_ntpice").val(res.data.notax_money)
                                        $("#c_amount").val(res.data.total_money);
                                        $("#c_tax").val(res.data.total_taxmoney);
                                        var select = 'dd[lay-value="'+res.data.associate_id.cl_name + '"]';// 设置value
                                        $('#cl_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                        vm.cuobj = res.data.associate_id;
                                        vm.cid = res.data.associate_id.id;
                                        $('#c_createtime').val(vm.formatDate(res.data.createtime));
                                        layui.form.render('select');// 再次渲染select
                                    }else if(vm.tabs == 1){
                                        $("#r_number").val(res.data.num);
                                        $("#r_unit").val(res.data.unit);
                                        $("#r_rate").val(res.data.tax_fee * 100);
                                        $("#r_tpice").val(res.data.tax_money);
                                        $("#r_pof").val(res.data.use_part);
                                        $("#r_note").val(res.data.note);
                                        $("#r_ntpice").val(res.data.notax_money)
                                        $("#r_amount").val(res.data.total_money);
                                        $("#r_tax").val(res.data.total_taxmoney);
                                        var select = 'dd[lay-value="'+res.data.associate_id.ry_name + '"]';// 设置value
                                        $('#rg_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                        vm.cuobj = res.data.associate_id;
                                        vm.rid = res.data.associate_id.id;
                                        $('#r_createtime').val(vm.formatDate(res.data.createtime));
                                        layui.form.render('select');// 再次渲染select
                                    }else if(vm.tabs == 2){
                                        $("#j_number").val(res.data.num);
                                        $("#j_unit").val(res.data.unit);
                                        $("#j_rate").val(res.data.tax_fee * 100);
                                        $("#j_tpice").val(res.data.tax_money);
                                        $("#j_pof").val(res.data.use_part);
                                        $("#j_note").val(res.data.note);
                                        $("#j_ntpice").val(res.data.notax_money)
                                        $("#j_amount").val(res.data.total_money);
                                        $("#j_tax").val(res.data.total_taxmoney);
                                        var select = 'dd[lay-value="'+res.data.associate_id.jx_name + '"]';// 设置value
                                        $('#jx_name').siblings("div.layui-form-select").find('dl').find(select).click();
                                        vm.cuobj = res.data.associate_id;
                                        vm.jid = res.data.associate_id.id;
                                        $('#j_createtime').val(vm.formatDate(res.data.createtime));
                                        layui.form.render('select');// 再次渲染select
                                    }
                                }else{
                                    layer.msg(res.msg, {time: 1000, icon: 2})
                                }
                            })
                        )
                    }
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['700px', '550px'], //宽高
                        title: title,
                        content: $("#addopen")
                    });
                }
            },
            formatDate: function(crtime){
                var date = new Date(parseInt(crtime) * 1000) // 时间戳为10位需乘1000，为13位则不用
                var Y = date.getFullYear() // 年
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) // 月
                var D = date.getDate() < 10 ? '0' + date.getDate() + '' : date.getDate() + '' // 日
                return Y + '-' + M + '-' + D // yyyy-mm-dd
            },
            //删除
            del: function (e) {
                var obj = {
                    id: e,
                    project_id: vm.project_id
                }
                layer.confirm('确定删除吗？', {
                    btn: ['确定','取消'] //按钮
                },function(){
                    var load = layer.load(2, {
                        shade: [0.6, '#fff'] //0.1透明度的白色背景
                    })
                    $.when(PUATTRBUTE.REQUESTFUN('api/Zhimoney/zhimoneydel', obj).done(function(res){
                            layer.close(load);
                            if(res.code == 1){
                                layer.msg(res.msg, {time: 1000, icon: 1})
                                vm.initData();
                            }else{
                                layer.msg(res.msg, {time: 1000, icon: 2})
                            }
                        })
                    )
                },function(){
                    layer.closeAll();
                });
            },
            //导出
            exports: function () {
                if(this.permissions == 1){
                    layer.alert("抱歉，您没有此权限！");
                }else {
                    var tableHtml = $('#hesan');
                    $(tableHtml).css({
                        'border':'1px solid #d5d5d2',
                        'text-align':'center',
                        'border-collapse':'collapse',
                    });
                    $(tableHtml).find('tr td').css({
                        'text-align':'center',
                        'border':'1px solid #d5d5d2',
                        'line-height':'30px',
                        'padding':'0px 10px',
                        'min-width':'100px'
                    });
                    var html = "<html><head><meta charset='utf-8' /></head><body>" + tableHtml[0].outerHTML + "</body></html>";
// 实例化一个Blob对象，其构造函数的第一个参数是包含文件内容的数组，第二个参数是包含文件类型属性的对象
                    var blob = new Blob([html], { type: "application/vnd.ms-excel" });
                    var urlA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
                    $('.table-btn-group').append(urlA);
                    urlA.href = URL.createObjectURL(blob);
// 设置文件名，目前只有Chrome和FireFox支持此属性
                    urlA.download = "直接费.xls";
                    urlA.click();
                }
            }
        }
    })
</script>

